<template>
	<view class="phonepopup-page">
		<van-popup
		  :show="show"
		  closeable
		  close-icon="close"
		  round
		  position="bottom"
		  custom-style="height: 20%"
		  @close="onClose"
		>
		<view class="custom-class">
			<view v-if="type === 'phone'">
				<button type="default" open-type="getPhoneNumber" @getphonenumber="decryptPhoneNumber" class="get-phone">获取手机号</button>
				<!-- <button type="default" open-type="getPhoneNumber" @getphonenumber="decryptPhoneNumber">获取手机号</button> -->
			</view>  
			<view v-if="type === 'user'">
				 <button open-type="getUserInfo" @getuserinfo="getUserInfo" class="get-phone">获取用户信息</button>
			</view> 
		</view>
		</van-popup>
	</view>
</template>

<script setup lang="ts">
	import {ref} from "vue"
	import {weixinServer } from "@/common/index"
	interface Props{
		show: Boolean
		type: 'phone' | 'user'
	}
	// 定义props
	const props = defineProps({
	  show: Boolean, 
	  type: String
	});
	const emit = defineEmits(["close"])
	console.log("props", props)
	
	const onClose = () => {
		emit("close")
	}
	
	const decryptPhoneNumber = (res:any) => {
		console.log("获取手机号", res)
	}
	const avatarUrl = ref("");
	const getUserInfo = async (e) => {
		console.log("获取用户信息", e)
		return;
		try{
			const {detail} = e as any
			const opts = {
				"iv": detail.iv,
				"encryptedData": detail.encryptedData,
				"signature": detail.signature,
				"code":""
			}
			
			const getUserInfo = async (opts) => {
				try{
					const data = await weixinServer.wechatUser(opts);
				}catch(e){
					//TODO handle the exception
				}
			}
			uni.login({
				provider:"weixin",
				success(res) {
					console.log("login", res)
					if(res.errMsg === "login:ok"){
						opts["code"] = res.code;
						getUserInfo(opts);
					}
					
				}
			})
		
		}catch(e){
			//TODO handle the exception
			console.log(e)
		}
		
	}
</script>

<style scoped lang="scss">
	.phonepopup-page{
		.custom-class{
			height: 100%;
			display: flex;
			align-items: center;
			justify-content: center;
			
			.get-phone{
				width:100%;
				height: 80upx;
				background-color: #e77817;
				color: #fff;
				border-radius: 40px;
				font-size: 26upx;
				line-height: 80upx;
			}
			.login-btn{
				width: calc(100vw - 100upx)
			}
		}
	}
	
</style>